<template>
  <el-container>
    <el-aside class="sidebar" v-bind:class="{ 'sidebar-collapse': isCollapse }">
      <el-header class="logo">
        <img :src="logo" class="sidebar-logo" />
        <h1 class="sidebar-title">{{ app.name }}</h1>
      </el-header>
      <el-scrollbar>
      <el-menu
        :default-active="value"
        @select="handleSelect"
        :collapse="isCollapse"
        :collapse-transition="false"
        active-text-color="rgb(24, 144, 255)"
        class="menu"
        :router="true"
      >
        <memu-item :menus="menus" :isCollapse="isCollapse" />
      </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header class="header">
        <i
          class="el-icon-s-fold sidebarToggle"
          v-if="!isCollapse"
          @click="actionMenu"
        ></i>
        <i
          class="el-icon-s-unfold sidebarToggle"
          v-if="isCollapse"
          @click="actionMenu"
        ></i>
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item v-for="(item,i) in curName" :key="i">{{ item }}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-dropdown style="float: right; margin-right: 5px; font-size: 12px">
          <i class="el-icon-user-solid" style="font-size: 24px"
            ><span style="font-size: 12px">{{ user.name }}</span>
            <i
              style="font-size: 12px"
              class="el-icon-arrow-down el-icon--right"
            ></i
          ></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout()" style="font-size: 12px"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-main>
        <div v-loading="loading">
          <div id="container"></div>
          <router-view v-if="!microAppsActive" />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { registerMicroApps, start } from "@ice/stark";
import idaas from "@/apis/idaas";
import logoImg from "@/assets/logo.png";
import MemuItem from "./item.vue";

export default {
  data() {
    return {
      isCollapse: false,
      loading: false,
      microAppsActive: false,
      user: {
        name: "",
      },
      menus: [],
      title: "应用系统",
      logo: logoImg,
      app: {},
      fullname:{},
      curName:[],
    };
  },
  name: "Layout",
  components: {
    MemuItem,
  },
  computed: {
    value() {
      return this.$route.path;
    },
  },
  async mounted() {
    this.userinfo();
    const rect = document.body.getBoundingClientRect();
    this.openMenu = rect.width - 1 > 992;
    await this.regApp();
    await this.initMenu();
  },
  methods: {
    async initMenu() {
      let menus = await idaas.getMenus();
      this.menus = menus.data;
      this.fetchMenuName(this.menus,"",[])
      console.log(this.fullname)
      this.setPath(this.$route.path)
      let app = await idaas.getApp();
      this.app = app.data;
    },
    async regApp() {
      const container = document.getElementById("container");
      let subapps = await idaas.getSubApps();
      let apps = new Array();
      subapps.data.map((item) => {
        let path = item.path;
        if (process.env.VUE_APP_BASE != "/") {
          path = process.env.VUE_APP_BASE + item.path;
        }
        apps.push({
          name: item.id,
          activePath: path,
          title: item.name,
          sandbox: true,
          container,
          entry: item.entry,
        });
      });
      registerMicroApps(apps);
      start({
        onLoadingApp: () => {
          this.loading = true;
        },
        onFinishLoading: () => {
          this.loading = false;
        },
        onRouteChange: (_, pathname) => {
          // 处理微应用间跳转无法触发 Vue Router 响应
          console.log(pathname)
          this.setPath(pathname)
          //this.$router.push(pathname).catch(() => {});
        },
        onActiveApps: (activeApps) => {
          this.microAppsActive = (activeApps || []).length;
        },
      });
    },
    actionMenu() {
      this.isCollapse = !this.isCollapse;
    },
    handleSelect(key) {
      if (document.body.getBoundingClientRect().width - 1 < 992) {
        this.isCollapse = true;
      }
      console.log(key)
      this.setPath(key)
      //this.$router.push(key);
    },
    setPath(pathname){
      if(pathname.substr(pathname.length-1, 1) != "/" ){
        pathname+="/"
      }
      this.curName=this.fullname[pathname]
    },
    fetchMenuName(menus,path,names){
      let _that =this;
      menus.forEach( menu=> {
        let npath= path+"/"+menu.path
        let nnames=[...names]
        nnames.push(menu.meta.title)
        if(menu.path.substr(0, 1) == "/"){
          npath= path+menu.path
        }
         if (menu.children.length==0){
           if(npath.substr(npath.length-1, 1) != "/" ){
              npath+="/"
            }
           _that.fullname[npath]=nnames
         }else{
           _that.fetchMenuName(menu.children,npath,nnames)
         }
      });
    },
    logout() {
      this.$confirm("退出系统登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        window.location.href = "/idaas/app/logout";
      });
    },
    userinfo() {
      idaas.userinfo().then((resp) => {
        this.user.name = resp.data.nickName;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  flex: 1;
}
.menu{
  height: calc(100vh - 60px);
}
</style>